import React, { useState, createContext } from "react";
import Counter from './child/Counter'
import {Button} from 'antd'
import { useTranslation } from 'react-i18next';
//  const CountContext = createContext(0);
const CountContext = createContext(null)
 console.log('CountContext',CountContext);
export { CountContext };




const About = () => {
 const [count, setCount] = useState<number>(2);
 const {t,i18n} = useTranslation()
console.log('language',i18n.language);
 const clickHandle = ()=>{
   
    setCount(count + 1)
 }
 
  return (
    
    <div>
     {/* <p>父组件点击数量：{count}</p>
      <Button onClick={clickHandle}>{"点击+666"}</Button>
     
       <button className="w-64 h-8 ml-10 mt-3 bg-amber-500 rounded-lg text-neutral-300 hover:bg-red-500">
         点我试试
        </button>
      <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
     <div className="bg-blue-500 text-white p-1 m-5">
      This is a Tailwind CSS styled component.
    </div> 
    */}
    <div class="w-96 border-stone-200 border md:mx-auto shadow-md p-8 text-center mt-5">
    <input className="w-52 h-7 border border-slate-200 p-1 rounded-sm mb-7"/>
     <input className="w-52 h-7 border border-slate-200 p-1 rounded-sm outline-gray-300	 outline-0 focus:border-sky-200 active:border-sky-200" />
      <button className="w-52 h-6  mt-3 bg-blue-400 text-xs text-gray-50 dark:text-black dark:bg-rose-300 hover:bg-blue-500 rounded-sm"
      onClick={()=> {
        const lng = i18n.language === 'zh'? 'en':'zh'
        i18n.changeLanguage(lng)
        localStorage.setItem('language',lng) 
      }}
      >
         {t('language')}
      </button>

      <p>{t('testName')}</p>
      <p>{t('login')}</p>
      <p>{t('apple',{appleCount:count, pearCount:999})}</p>
      <button type='button' onClick={()=>setCount(pre=>pre+1)}>samll苹果</button>
    </div>
    <CountContext.Provider value={count}>
        <Counter/>
    </CountContext.Provider>

      {/* <CountContext.Provider value={count}>
        <Counter />
      </CountContext.Provider>
    */}
     </div>
  );

}

export default About
